<template>
	<aside v-show="list.length">
		<div class="panel panel-bg hidden-xs">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-tags newicon"></span> 文章分类
			</div>
			<div class="d_tags">
				<router-link :key="item.id" :to="{path:'/topics',query:{cate_id:item.id}}" v-for="item in list">
					{{item.cate_name}}<span style="float:right">({{item.items_count}})</span>
				</router-link>
			</div>
		</div>
	</aside>
</template>
<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		created() {
			this.__getList();
		},
		methods: {
			__getList() {
				this.$http.get('cates').then((resource)=>{
					this.list = resource.data;
					this.$emit('ready');
				});
			}
		}
	}
</script>

<style type="text/css">
	
</style>
<style lang="scss" scope>
	.d_tags {
		padding:12px 10px 15px 10px;
		a {
		    background-color: #00a67c;
		    color: #fff !important;
		    display: inline-block;
		    line-height: 21px;
		    margin: 0 5px 5px 7px;
		    opacity: .7;
		    padding: 2px 6px;
		    width: 45%;
			&:nth-child(9n) {
				background-color:#4a4a4a
			}
			&:nth-child(9n+1) {
				background-color:#15a287
			}
			&:nth-child(9n+2) {
				background-color:#5cb85c
			}
			&:nth-child(9n+3) {
				background-color:#d9534f
			}
			&:nth-child(9n+4) {
				background-color:#567e95
			}
			&:nth-child(9n+5) {
				background-color:#b433ff
			}
			&:nth-child(9n+6) {
				background-color:#00a67c
			}
			&:nth-child(9n+7) {
				background-color:#b37333
			}
			&:nth-child(9n+8) {
				background-color:#f60
			}
			&:hover {
				opacity: 1;
			}
		}
	}
</style>